<%--
  Created by IntelliJ IDEA.
  User: 11838
  Date: 2020/12/8
  Time: 14:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>入库统计</title>
    <script src="${pageContext.request.contextPath}/style/jquery-2.1.0.js"></script>
    <script src="${pageContext.request.contextPath}/style/echarts.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/layui/css/layui.css" charset="GBK">
    <script src="${pageContext.request.contextPath}/style/layui/layui.js"></script>
</head>
<body style="background-color: #E9E5DC">
<form class="layui-form" id="searchForm">
    <div class="layui-form" style="margin-top: 20px">
        <div class="layui-form-item" style="float: left">
            <div class="layui-inline">
                <label class="layui-form-label">年选择器</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test2" placeholder="请输入年份" name="year">
                </div>
            </div>
        </div>
        <div class="layui-input-inline" style="width: 50px;">
            <button type="button" onclick="getData();" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal">搜索</button>
        </div>
        <div class="layui-input-inline" style="width: 50px;">
            <button type="reset" onclick="refresh();" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<span style="font-size: 40px;position: absolute;left: 620px;top: 25px" id="span" name="year"></span>
<span style="font-size: 35px;position: absolute;left: 720px;top: 23px">入库统计</span>
<div id="left" style="width: 1290px;height:450px; float: left"></div>
    <script type="text/javascript">
        var year1="";
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //年选择器
            laydate.render({
                elem: '#test2'
                ,type: 'year'
            });
        });
        let typeData = [];
        let tableData = [];
        //页面加载时加载
        $(function (){
            begin();
            getType();
            getData();
            //span获取当前年份
            year();
            function year() {
                var date = new Date();
                var year = date.getFullYear();
                console.log(year);
                $("#span").html(year);
            }
        });
        //重置搜索框
        function refresh(){
            location=location;
        }
        //获取设施类型
        function getType(){
            $.ajax({
                url: '${pageContext.request.contextPath}/CSTongji/tongjiType',
                type: 'post',
                data: $("#left").serialize(),
                async: false,
                success: function (r) {
                    typeData = r;
                },error:function(msg){
                    alert("服务器错误");
                }
            });
        }
        //获取数据
        function getData(){
            year1 = $("#test2").val();
            $("#span").html(year1);
            $.ajax({
                url: '${pageContext.request.contextPath}/CSTongji/selectTongji',
                type: 'post',
                data: {year:year1},
                async: false,
                //dataType: 'json',
                success: function (r) {
                    tableData = r;
                    begin();
                },error:function(msg){
                    alert("服务器错误");
                }
            });
        }
        //统计图主体
        function begin() {
            var myChart = echarts.init(document.getElementById('left'));
            var posList = [
                'left', 'right', 'top', 'bottom',
                'inside',
                'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
                'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
            ];

            var app = [];
            app.configParameters = {
                rotate: {
                    min: -90,
                    max: 90
                },
                align: {
                    options: {
                        left: 'left',
                        center: 'center',
                        right: 'right'
                    }
                },
                verticalAlign: {
                    options: {
                        top: 'top',
                        middle: 'middle',
                        bottom: 'bottom'
                    }
                },
                position: {
                    options: echarts.util.reduce(posList, function (map, pos) {
                        map[pos] = pos;
                        return map;
                    }, {})
                },
                distance: {
                    min: 0,
                    max: 100
                }
            };

            app.config = {
                rotate: 90,
                align: 'left',
                verticalAlign: 'middle',
                position: 'insideBottom',
                distance: 15,
                onChange: function () {
                    var labelOption = {
                        normal: {
                            rotate: app.config.rotate,
                            align: app.config.align,
                            verticalAlign: app.config.verticalAlign,
                            position: app.config.position,
                            distance: app.config.distance
                        }
                    };
                    myChart.setOption({
                        series: [{
                            label: labelOption
                        }, {
                            label: labelOption
                        }, {
                            label: labelOption
                        }, {
                            label: labelOption
                        }]
                    });
                }
            };


            var labelOption = {
                show: true,
                position: app.config.position,
                distance: app.config.distance,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                rotate: app.config.rotate,
                formatter: '{c}  {name|{a}}',
                fontSize: 16,
                rich: {
                    name: {
                        textBorderColor: '#fff'
                    }
                }
            };

            option = {
                //统计图颜色
                color: ['Red', 'pink', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: typeData/*['Forest', 'Steppe', 'Desert', 'Wetland']*/
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {show: false},
                        //x轴月份
                        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                //柱图中间无空隙
                barGap:'1%',
                //数据主体
                series: tableData/*[
                    {
                        name: 'Forest',
                        type: 'bar',
                        barGap: 0,
                        label: labelOption,
                        data: [320, 332, 301, 334, 390]
                    },
                    {
                        name: 'Steppe',
                        type: 'bar',
                        label: labelOption,
                        data: [220, 182, 191, 234, 290]
                    },
                    {
                        name: 'Desert',
                        type: 'bar',
                        label: labelOption,
                        data: [150, 232, 201, 154, 190]
                    },
                    {
                        name: 'Wetland',
                        type: 'bar',
                        label: labelOption,
                        data: [98, 77, 101, 99, 40]
                    }
                ]*/
            };
            myChart.setOption(option);
        }
    </script>
</body>
</html>
